<template>
	<!-- 顶部导航栏 -->
	<view class="box cu-item">
		<view 
		class="top-cont"></view>
		<view
		class="set flex justify-between padding-sm align-center">
		<text
		@click="handleback"
		 style="font-size: 25px;" class="cuIcon-close"></text>
		<text 
		@click="handleCmplt"
		style="font-size: 20px;">完成</text>
		</view>
	</view>
	<view >
		<view class="text-center margin-top-xl">
			<view class="text-center img-box">
				<image
				@click="imageUpload"
				:src="fileimage?fileimage:''" mode="aspectFill"></image>
				<text 
				@click="imageUpload"
				v-if="!fileimage"
				class="img-text">点击上传图片</text>
			</view>
			
			<view class="flex justify-center margin-lg">
				<view class=" padding-xs chos">
					<!-- 滚动选择器 -->
					<picker 
					:value="value"
					mode="selector" 
					:range="pickir"
					 @change="pickirChange">
					 <text class="text-sm text-gray">可见范围：</text>
						<text class="text-sm text-gray">{{pickir[value]}}</text>
					</picker>
				</view>
			</view>
			<view style="padding: 0 100rpx 20rpx 100rpx;">
				<input
				@blur="handleInput"
				@confirm="handleInput"
				v-model="cllctWrks"
				style="border-bottom: 1rpx solid gray;"
				type="text" placeholder="文集名" />
			</view>
			
		</view>
		
	</view>
</template>

<script setup lang="ts">
import { ref ,type Ref} from 'vue' 
import http from '@/utils/http'
import { useCounterStore } from '@/store/counter'
import type { cllctType } from '@/model/goods'
import { onShow } from '@dcloudio/uni-app'
const counter=useCounterStore()
//公开私密选择
interface rangeType{
	value:number
	text:string
}
const value=ref<number>(0)
const selectPic=ref<string>('私密')
const pickir:Array<string>= ['私密','公开']
const pickirChange=(e:any)=>{
	console.log('e:',e);
	value.value=e.detail.value
	selectPic.value=pickir[value.value]
	console.log(selectPic.value);
}
//返回
const handleback=()=>{
	uni.navigateBack({
		delta:1
	})
}

//图片上传
const fileimage=ref<string>('')
const imageUpload=()=>{
	uni.chooseImage({
		count:1,
		success: (file) => {
			console.log(file);
			let temp = file.tempFilePaths[0] //2. 临时资源路径
			fileimage.value=temp
			uni.uploadFile({
				url: 'http://1.95.67.194:3000/upload', 
				filePath:temp,
				name:'avatar',
				success: (res) => {
					console.log(res);
					let url = JSON.parse(res.data).url
					cllctData.value!.picture=url
					uni.showToast({
						title:'上传成功',
						icon:'none'
					})
				},
				fail: (err) => {
					console.log('失败',err);
					uni.showToast({
						title:'失败',
						icon:'none'
					})
				}
			})
		}
	})
}
//完成
const cllctWrks:Ref<string>=ref('')
let  cllctData:Ref<cllctType|null>=ref({
	picture:'',
	titlename:'',
	optionalrange:'私密'
})
const handleInput=()=>{
	cllctData.value!.titlename = cllctWrks.value//获取输入框内容
}
const handleCmplt=()=>{
	if(cllctData.value?.titlename==''){
		uni.showToast({
			title:'文集名不能未空，亲！',
			icon:'none'
		})
		return
	}else{
		console.log('完整数据',cllctData.value);
		 http.post('/classes/collectedworks',{
			picture:cllctData.value?.picture,
			titlename:cllctData.value?.titlename,
			optionalrange:selectPic.value,
			userid:counter.userData?.objectId
		})
		uni.showToast({
			title:'创建成功',
			icon:'none'
		})
		uni.navigateBack({
			delta:1
		})
	}
}
onShow(()=>{
	console.log(selectPic.value);
})
</script>

<style lang="scss">
.box{
	position: sticky;
	top:0;
	z-index: 777;
	background-color: white;
	.top-cont{
		height: 35px;
	}
} 
.chos{
	border: 1rpx solid gray;
	width: 30%;
	border-radius: 30rpx;
}
.img-box{
	position: relative;
}
image{
	
	width: 250rpx;
	height: 250rpx;
	border: 1rpx solid #ccc;
	background-color: #ccc;
	
}  
.img-text{
		position: absolute;
		bottom: 125rpx;
		left: 39%;
	}
</style>
